<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!--
        * @作者: 陈会丽 *
        * @时间：2024-2025-1 *
        -->
    </head>
    <body>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            /** 
             * 三角形
             */
            /* 第一步 */
            /* .triangle-box {
                width: 100px;
                height: 100px;
                background-color: pink;
                border: 100px;
                border-style:solid;
                border-color: #FF0000 #90EE90 #8EE5EE #919191;
            } */
            /* 第二步，宽和高改为0 */
             .triangle-box {
                 display: inline-block;
                width: 0;
                height: 0;
                background-color: pink;
                border: 100px;
                border-style:solid;
                border-color: #FF0000 #90EE90 #8EE5EE #919191;
            } 
            /**
             * 向上三角形
             * 将下、右、左边框设置为transparent（透明）
             */
            .triangle-up {
                display: inline-block;
                margin-top: 20px;
                width: 0;
                height: 0;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-bottom: 100px solid black;
            }
            /* 向下三角形 */
            .triangle-down {
                display: inline-block;
                margin-top: 20px;
                width: 0;
                height: 0;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-top: 100px solid black;
            }
            /* 向左三角形 */
            .triangle-left {
                display: inline-block;
                margin-left: 20px;
                width: 0;
                height: 0;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-right: 100px solid black;
            }
            /* 向右三角形 */
            .triangle-right {
                display: inline-block;
                margin-left: 20px;
                width: 0;
                height: 0;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-left: 100px solid black;
            }
            /* 直角三角形 */
            .right-angle {
                display: inline-block;
                margin-left: 50px;
                width: 0;
                height: 0;
                border-top: 100px solid #f00;
                border-right: 100px solid transparent;
                /*border-left: 100px solid transparent;
                 border-bottom: 100px solid pink; */
            }
    
    
    
            /**
             * 五角星
             * 三个三角形旋转组成
             */
            .pentagram {
                width: 100%;
                height: 200px;
                margin-top: 50px;
                padding: 20px;
            }
            /* 第一步，第一个大的向下三角形 */
            .pentagram-down {
                position: relative;
                width: 0;
                height: 0;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-top: 70px solid yellow;
            }
            /* 第二步，通过伪元素复制两个三角形 */
            .pentagram-down:before,
            .pentagram-down:after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-top: 70px solid yellow;
            }
            /* 第三步，旋转角度拼接为五角星 */
            .pentagram-down:before {
                position: absolute;
                transform: rotate(74deg);
                left: -100px;
                top: -70px;
            }
            .pentagram-down:after {
                position: absolute;
                transform: rotate(-70deg);
                left: -95px;
                top: -69px;
            }
    
    
    
            /* 五星红旗 */
            .container {
                position: relative;
                width: 600px;
                height: 400px;
                background-color: #f00;
                padding: 20px;
                margin-left: 100px;
            }
            .star {
                position: absolute;
                top: 40px;
                left: 60px;
                width: 0;
                height: 0;
                border-right: 50px solid transparent;
                border-left: 50px solid transparent;
                border-top: 30px solid yellow;
            }
            .star:before,
            .star:after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-right: 50px solid transparent;
                border-left: 50px solid transparent;
                border-top: 30px solid yellow;
            }
            .star:before {
                position: absolute;
                transform: rotate(74deg);
                left: -50px;
                top: -30px;
            }
            .star:after {
                position: absolute;
                transform: rotate(-74deg);
                left: -50px;
                top: -28px;
            }
            .star-item2 {
                transform: scale(.3,.3) rotate(55deg) translate(100px,-280px);
            }
            .star-item3 {
                transform: scale(.3,.3) rotate(70deg) translate(200px,-350px);
            }
            .star-item4 {
                transform: scale(.3,.3) rotate(15deg) translate(390px,150px);
            }
            .star-item5 {
                transform: scale(.3,.3) rotate(50deg) translate(350px,100px);
            }
        </style>
    </head>
    <body>
        <div class="triangle-box"></div>
        <div class="triangle-up"></div>
        <div class="triangle-down"></div>
        <div class="triangle-left"></div>
        <div class="triangle-right"></div>
        <div class="right-angle"></div>
    
    
        <div class="pentagram">
            <div class="pentagram-down"></div>
        </div>
        <div class="container">
            <div class="star star-item1"></div>
            <div class="star star-item2"></div>
            <div class="star star-item3"></div>
            <div class="star star-item4"></div>
            <div class="star star-item5"></div>
        </div>
    </body>
</html>